<!-- 编辑缴费明细 -->
<template>
  <el-dialog
    title="编辑缴费明细"
    :visible.sync="visible"
    width="900px"
    @close="handleClose"
    class="dialog-fee"
    :close-on-click-modal="false"
  >
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
      <!-- 缴费信息区域 -->
      <div class="form-section">
        <h3 class="section-title">缴费信息</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="缴费状态">
            <el-form-item prop="paymentState">
              <el-select v-model="form.paymentState" placeholder="请选择">
                <el-option
                  v-for="(label, value) in dict.payment_status"
                  :key="value"
                  :label="label"
                  :value="value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="缴费方式">
            <el-form-item prop="paymentMethod">
              <el-select v-model="form.paymentMethod" placeholder="请选择">
                <el-option
                  v-for="(label, value) in dict.payment_method"
                  :key="value"
                  :label="label"
                  :value="value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="培训费/考试费">
            <el-form-item prop="paymentAmount">
              <el-input
                v-model="form.paymentAmount"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="诺诺单号">
            <el-form-item prop="nuonuoNumber">
              <el-input
                v-model="form.nuonuoNumber"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="办结情况">
            <el-form-item prop="isSettled">
              <el-select v-model="form.isSettled" placeholder="请选择">
                <el-option
                  v-for="(label, value) in dict.is_settled"
                  :key="value"
                  :label="label"
                  :value="value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="缴费备注">
            <el-form-item prop="exampleOne">
              <el-input
                type="textarea"
                v-model="form.exampleOne"
                placeholder="请输入缴费备注"
                rows="2"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 单位信息区域 -->
      <div class="form-section">
        <h3 class="section-title">单位信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="单位名称">{{
            form.companyName
          }}</el-descriptions-item>
          <el-descriptions-item label="单位统一信用代码">{{
            form.creditCode
          }}</el-descriptions-item>
          <el-descriptions-item label="所属区域">
            <span>{{
              dict.administrative_area[Number(form.administrativeArea)]
            }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="所在单位性质">
            <span>{{ dict.unit_nature[Number(form.unitNature)] }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="联系人姓名">{{
            form.contactName
          }}</el-descriptions-item>
          <el-descriptions-item label="联系人电话">{{
            form.contactPhone
          }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 人员基本信息区域 -->
      <div class="form-section">
        <h3 class="section-title">人员基本信息</h3>
        <el-table :data="form.personList" border style="width: 100%">
          <el-table-column prop="studentName" label="学员" width="120" />
          <el-table-column prop="projectMap" label="报名项目" width="320" />
          <el-table-column prop="trainingClass" label="培训班" width="120" />
          <el-table-column prop="trainingType" label="培训类别" width="120">
            <template slot-scope="scope">
              {{ dict.training_type[Number(scope.row.trainingType)] }}
            </template></el-table-column
          >
          <el-table-column prop="projectSum" label="费用" width="120" />
        </el-table>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import DictTag from "@/components/DictTag";
export default {
  name: "FeeUpdateDialog",
  components: {
    DictTag,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => ({
        // 缴费信息属性
        paymentState: "",
        paymentMethod: "",
        paymentAmount: "",
        nuonuoNumber: "",
        isSettled: "",
        exampleOne: "",
        // 单位信息属性
        companyName: "",
        creditCode: "",
        unitNature: "enterprise",
        contactName: "",
        phone: "",
        contactPhone: "", // 联系人电话
        remark: "",
        exampleTwo: [],
      }),
    },
    queryParamsData: {
      type: Object,
      default: () => ({
        pageNum: 1,
        pageSize: 10,
        name: null,
        idNumber: null,
        certNumber: null,
        trainingType: null,
        phone: null,
        unitName: null,
        paymentState: null,
        recordStatus: null,
        submitStatus: null,
        startTime: null,
        endTime: null,
        projectId: null,
      }),
    },
    // registrationDtoList: {
    //   type: Array,
    //   default: () => [],
    // },
    //字典
    dict: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      form: {},
      queryParams: {},
      rules: {
        // 缴费信息验证规则
        paymentState: [
          { required: true, message: "请选择缴费状态", trigger: "change" },
        ],
        paymentMethod: [
          { required: true, message: "请选择缴费方式", trigger: "change" },
        ],
        paymentAmount: [
          { required: true, message: "请输入培训费/考试费", trigger: "blur" },
          {
            pattern: /^\d+(\.\d{1,2})?$/,
            message: "请输入有效的金额（最多两位小数）",
            trigger: "blur",
          },
        ],
        nuonuoNumber: [
          { required: true, message: "请输入诺诺单号", trigger: "blur" },
        ],
        isSettled: [
          { required: true, message: "请选择办结情况", trigger: "change" },
        ],
        exampleOne: [
          { max: 200, message: "缴费备注最多输入200个字符", trigger: "blur" },
        ],
      },

      // 单位性质选项映射
      unitNatureOptions: [
        { label: "企业", value: "enterprise" },
        { label: "事业单位", value: "institution" },
        { label: "政府机关", value: "government" },
      ],
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.form = JSON.parse(JSON.stringify(this.formData));
        // 从 units 中提取单位信息
        if (this.formData.units) {
          const unit = this.formData.units;
          this.form.companyName = unit.unitName || "";
          this.form.creditCode = unit.socialCreditCode || "";
          this.form.administrativeArea = unit.administrativeArea || "";
          this.form.unitNature = unit.unitNature || "";
          this.form.contactName = unit.contact || "";
          this.form.contactPhone = unit.phonenumber || "";
        }

        // 从 registrationDtoList 中提取人员基本信息
        if (
          this.formData.registrationDtoList &&
          Array.isArray(this.formData.registrationDtoList)
        ) {
          this.form.personList = this.formData.registrationDtoList.map(
            (student) => ({
              studentName: student.studentName,
              projectMap: student.projectMap || "",
              trainingClass: student.trainingClass || "",
              trainingType: student.trainingType || "",
              projectSum: student.projectSum || "0",
            })
          );
        } else {
          this.form.personList = [];
        }
        this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
      }
    },
  },
  methods: {
    handleCancel() {
      this.$emit("update:visible", false);
      this.$emit("cancel");
    },
    handleConfirm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$emit("confirm", {
            form: this.form,
            queryParams: this.queryParams,
          });
          this.$emit("update:visible", false);
        } else {
          return false;
        }
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
      this.$nextTick(() => {
        this.$refs.formRef.resetFields();
      });
    },
    // 获取单位性质标签
    getUnitNatureLabel(value) {
      const option = this.unitNatureOptions.find(
        (item) => item.value === value
      );
      return option ? option.label : value;
    },
  },
};
</script>
<style scoped>
.form-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.section-title {
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

::v-deep .el-form-item {
  margin-bottom: 15px;
}

::v-deep .el-dialog__body {
  max-height: 600px;
  overflow-y: auto;
  padding: 20px;
}
.dialog-fee ::v-deep .el-dialog__header {
  text-align: center;
}

/* 特别处理描述列表中的表单项 */
::v-deep .el-descriptions .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-descriptions .el-form-item__content {
  display: flex;
}

/* 单位信息区域样式调整 */
::v-deep .el-descriptions {
  background-color: #fff;
}

::v-deep .el-descriptions__body {
  background-color: #fff;
}
</style>